<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.min.js"></script>
</head>

<body>
 
    <input type="button" value="get" onclick="sendGet()">
    <input type="button" value="post" onclick="sendPost()">
    <input type="button" value="delete" onclick="sendDelete()">
    <script>

/* 
        1.测试请求：由浏览器自动发送的OPTIONS和HEAD请求
        2.简单请求:GET、无参POST
        3.复杂请求【跨域】：除GET、无参POST以外的其他请求
        HTTP协议规则中要求，复杂请求完成跨域操作时，必须先发送测试请求，完成服务器状态测试
        浏览器在完成复杂请求跨域发送时候，会自动优先发送测试请求 */

       /*  统一请求方法
            axios(config)     可以通过配置完成 所有类型的请求发送
        服务器测试请求方法（没有请求体 没有响应体 ）**（HTTP发送复杂请求时会自动触发）**
            axios.head(url [, config])   发送head类型的请求
            axios.options(url [, config])   发送options类型的请求
        URL参数方法 （没有请求体）
            axios.get(url [, config])   发送get类型的请求
            axios.delete(url [, config])  发送delete类型的请求
        FormData参数方法 （有请求体）
            axios.post(url [ , data [, config ] ])   发送post类型的请求
            axios.put(url [, data[, config]])   发送put类型的请求
            axios.patch(url [, data[, config]])   发送patch类型的请求 */


        //全局的axios的配置
        axios.defaults.baseURL="http://127.0.0.1:3000";
        function sendGet(){
           axios.get("/test/test-all",{
                url:"/aaa"
           })
           .then(function(res){
                console.log(res);
           });
        }

        function sendPost(){
            axios.post("/test/test-all")
            .then(function(res){
                console.log(res);
            });

        
        }
        function sendDelete(){

            // delete、put、patch、带参post、带自定义请求头的请求，均属于跨域复杂请求
            // 在跨域模式下出现复杂请求调用，必须在真实请求前完成服务器测试操作
            // 浏览器会自动发送OPTIONS请求
            // 测试的是服务器是否支持对应的复杂请求类型

            axios.delete("/test/test-all")
            .then(function(res){
                console.log(res);
            });
        }
    </script>
</body>

</html>